<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title th:text="${#servletContext.getAttribute('applicationOptionsMap').websiteTitle} + '&nbsp;|&nbsp;File'"></title>
	<link rel="shortcut icon" th:href="${#servletContext.getAttribute('applicationOptionsMap').websiteIco}">
	<link rel="apple-touch-icon" th:href="${#servletContext.getAttribute('applicationOptionsMap').websiteIco}">
	<!-- Tell the browser to be responsive to screen width -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Theme style -->
	<link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
	<link rel="stylesheet" th:href="@{/css/style.css}">
	<link rel="stylesheet" th:href="@{/plugins/cd-top/css/cd-top.css}">

	<!-- Font Awesome -->
	<link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
	<link rel="stylesheet" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
	<style type="text/css">
		.ul-style {
			display: block;
		}
		.li-style {
			border: 1px solid rgba(0,0,0,.125);
			list-style: none;
			border-radius: .25rem;
			margin: 9px;
			float: left;
			height: 100px;
			width: 100px;
			/*background: url(https://pannss.bdstatic.com/m-static/file-widget-1/common/ZIP_54_e01b06d.png) 50% 30% no-repeat;*/
		}
		.a-style {
			font-size: 13px;
			padding-left: 8px;
			padding-right: 8px;
			width:100%;
			height:100%;
			line-height:162px;
			text-align:center;
			text-decoration: none;
		}
		.a-style:hover {
			color: black;
		}
		.timeline>div>.timeline-item {
			box-shadow: none;
		}
		.bg-gradient-orange {
			color: #ffffff;
		}
	</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
	<!-- Navbar -->
	<nav class="main-header navbar navbar-expand navbar-white navbar-light">
		<!-- Left navbar links -->
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
			</li>
		</ul>
	</nav>
	<!-- /.navbar -->

	<!-- Main Sidebar Container -->
	<aside class="main-sidebar sidebar-dark-primary elevation-4">
		<!-- Brand Logo -->
		<h1>
			<a href="/index" class="brand-link">
				<img th:src="${#servletContext.getAttribute('applicationOptionsMap').avatar}" class="brand-image img-circle elevation-3">
				<span class="brand-text font-weight-light" th:text="${#servletContext.getAttribute('applicationOptionsMap').websiteTitle}">websiteTitle</span>
			</a>
		</h1>

		<!-- Sidebar -->
		<div class="sidebar">
			<!-- Sidebar Menu -->
			<nav class="mt-2">
				<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
					data-accordion="false">
					<!-- Add icons to the links using the .nav-icon class
						 with font-awesome or any other icon font library -->
					<li class="nav-header">读万卷书</li>
					<li class="nav-item">
						<a href="/index" class="nav-link">
							<i class="fa fa-home nav-icon"></i>
							<p>首页</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/category/1" class="nav-link">
							<i class="fa fa-bookmark nav-icon"></i>
							<p>分类</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/tag" class="nav-link">
							<i class="fa fa-tags nav-icon"></i>
							<p>标签</p>
						</a>
					</li>

					<li class="nav-header">行万里路</li>
					<li class="nav-item">
						<a href="/archive" class="nav-link">
							<i class="fa fa-archive nav-icon"></i>
							<p>归档</p>
						</a>
					</li>
					<li class="nav-header">点滴记录</li>
					<li class="nav-item">
						<a href="/guestbook" class="nav-link">
							<i class="fa fa-comments nav-icon"></i>
							<p>留言</p>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link active">
							<i class="fas fa-file-code nav-icon"></i>
							<p>文件</p>
						</a>
					</li>
				</ul>
			</nav>
			<!-- /.sidebar-menu -->
		</div>
		<!-- /.sidebar -->
	</aside>

	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper mt-3">
		<!-- Main content -->
		<section class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-9" style="padding-top: 18px;">
						<!-- The time line -->
						<div class="timeline">
							<!-- timeline time label -->
							<div class="time-label">
								<span class="bg-gradient-orange">2020年 6月</span>
							</div>
							<!-- /.timeline-label -->
							<!-- timeline item -->
							<div>
								<div class="timeline-item">
									<div class="card card-teal card-outline">
										<div class="card-body p-0">
											<ul class="list-group ul-style">
												<li class="bg-hover-gray li-style" th:date="${#dates.format((f.createdTime), 'yyyy,MM')}" th:each="f,arrayS:${files}">
													<a th:if="${#strings.containsIgnoreCase(f.path,'/upload/file/')}" th:href="${#request.getContextPath()}+${f.path}" th:style="'background: url(/img/'+${f.fileType}+'.png) 50% 30% no-repeat;'" target="_blank" class="d-block link-title text-truncate a-style" th:text="${f.name}" data-toggle="tooltip" data-placement="bottom" th:title="${f.name}"></a>
													<a th:if="${!#strings.containsIgnoreCase(f.path,'/upload/file/')}" th:href="${f.path}" th:style="'background: url(/img/'+${f.fileType}+'.png) 50% 30% no-repeat;'" target="_blank" class="d-block link-title text-truncate a-style" th:text="${f.name}" data-toggle="tooltip" data-placement="bottom" th:title="${f.name}"></a>
<!--													<a th:if="${f.fileType eq 'image'}" th:href="${#request.getContextPath()}+${f.path}" th:style="'background: url(/img/'+${f.fileType}+'.png) 50% 30% no-repeat;'" target="_blank" class="d-block link-title text-truncate a-style" th:text="${f.name}"></a>-->
<!--													<a th:if="${f.fileType eq 'image'}" th:href="${#request.getContextPath()}+${f.path}" th:style="'background: url('+${f.path}+') 50% 30% no-repeat;'" target="_blank" class="d-block link-title text-truncate a-style" th:text="${f.name}"></a>-->
												</li>
											</ul>

										</div>
										<!-- /.card-body -->
									</div>
								</div>
							</div>


							<!-- END timeline item -->
						</div>
					</div>
					<!-- /.col -->
					<div class="col-md-3">
						<!-- Profile Image -->
						<div class="card widget-user sticky-top">
							<!-- Add the bg color to the header using any of the bg-* classes -->
							<div class="widget-user-header bg-info">
								<h3 class="widget-user-username" th:text="${#servletContext.getAttribute('applicationOptionsMap').websiteTitle}"></h3>
							</div>
							<div class="widget-user-image">
								<img class="img-circle elevation-2" th:src="${#servletContext.getAttribute('applicationOptionsMap').avatar}" alt="Avatar">
							</div>
							<div class="card-body pt-5">
								<p class="text-muted" style="text-align: center" th:text="${#servletContext.getAttribute('applicationOptionsMap').description}">
								</p>

								<ul class="list-group list-group-unbordered">
									<li class="list-group-item" th:if="${!recommendContents.isEmpty()}">
										<strong><i class="far fa-bookmark mr-2"></i>推荐</strong>
										<div th:each="content,arrayS:${recommendContents}">
											<a th:href="'/articles/'+${content.slug}" class="d-block link-title text-truncate"
											   th:text="${content.title}"></a>
										</div>
									</li>

									<li class="list-group-item" th:if="!${#strings.isEmpty(#servletContext.getAttribute('applicationOptionsMap').location)}">
										<strong><i class="fas fa-map-marker-alt mr-2"></i>位置</strong>
										<div class="text-muted" th:text="${#servletContext.getAttribute('applicationOptionsMap').location}"></div>
									</li>

									<li class="list-group-item" th:if="!${#strings.isEmpty(#servletContext.getAttribute('applicationOptionsMap').hobbyList)}">
										<strong><i class="fas fa-code-branch mr-2"></i>爱好</strong>
										<div class="text-muted" >
											<span class="badge badge-success mr-1" th:each="hobby,arrayS:${#servletContext.getAttribute('applicationOptionsMap').hobbyList}" th:text="${hobby}"> </span>
										</div>
									</li>

									<li class="list-group-item">
										<strong><i class="fas fa-link mr-2"></i>链接</strong>
										<div class="text-muted">
											<a href="https://github.com/rawchen/blog-ssm" target="_blank" class="badge badge-warning">GitHub</a>
										</div>
									</li>

									<li class="list-group-item text-center">
										<a th:href="${#servletContext.getAttribute('applicationOptionsMap').qqLink}" target="_blank"
										   class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
										   data-placement="top" title="QQ">
											<i class="fa fa-qq"></i>
										</a>
										<a th:href="${#servletContext.getAttribute('applicationOptionsMap').emailLink}" target="_blank"
										   class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
										   data-placement="top" title="Email">
											<i class="fa fa-envelope"></i>
										</a>
										<a th:href="${#servletContext.getAttribute('applicationOptionsMap').githubLink}" target="_blank"
										   class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
										   data-placement="top" title="GitHub">
											<i class="fa fa-github text-white"></i>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /.row -->
			</div><!-- /.container-fluid -->
		</section>
		<!-- /.content -->
	</div>
	<!-- /.content-wrapper -->
	<footer class="main-footer">
		<a href="#0" class="cd-top">Top</a>
		<p class="text-center mb-1">
			Copyright © 2020-2021 | THE HARDER, THE MORE FORTUNATE.
		</p>
		<p class="text-center mb-1" th:if="!${#strings.isEmpty(#servletContext.getAttribute('applicationOptionsMap').icp)}">
			<a href="https://beian.miit.gov.cn/" th:text="${#servletContext.getAttribute('applicationOptionsMap').icp}"></a>
		</p>
	</footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<script th:src="@{/plugins/cd-top/js/cd-top.js}"></script>

<!-- tooltip -->
<script th:src="@{/js/tooltip.init.js}"></script>

<script>
	var arr = {};
	document.querySelectorAll('.timeline-item .list-group li').forEach(function (item, index) {
		var date = item.getAttribute('date');
		if (Object.keys(arr).indexOf(date) == -1) {
			arr[date] = [];
		}
		arr[date].push('<li class="bg-hover-gray li-style">' + item.innerHTML + '</li>');
		index != 0 && item.parentNode.removeChild(item);
	});
	document.getElementsByClassName('timeline')[0].innerHTML = '';
	for (key in arr) {
		date = key.split(',');
		var html = '<div class="time-label">\n' +
			'<span class="bg-gradient-orange">' + date[0] + ' . ' + date[1] + '</span>\n' +
			'</div><div><div class="timeline-item"><div class="card card-teal card-outline"><div class="card-body p-0"><ul class="list-group ul-style">' +
			arr[key].join(' ') +
			'</ul></div></div></div></div>';
		document.getElementsByClassName('timeline')[0].innerHTML += html;
	};
</script>
</body>
</html>
